<template>
 <transition mode="out-in">
    <div class="search-container">
      <div class="input">
          <i class="el-icon-back icon" @click="toFind"></i>
          <input type="text" class="search" v-model="keywords" @keyup.enter="searchrecommend" @blur='yincang'>
          <i class="el-icon-user"></i>
       </div>
       <!-- 搜索后的显示 -->
       <div class="beforesearch" ref="needhidden">
         <p>搜索: '{{keywords}}'</p>
         <ul>
           <li v-for="(item,index) in beforesearch" :key='index'><i class="el-icon-search"></i>{{item.keyword}}</li>
         </ul>
       </div>
       <!-- 热门搜索 -->
       <div class="hotsearch">
         <h4>热搜榜 </h4>
         <ul>
           <li v-for="(item,index) in  hotsong" :key='index'> <span>{{index+1}}</span><div><h5>{{item.searchWord}}</h5><p>{{item.content}}</p></div><span>{{item.score}}</span></li>
         </ul>
       </div>
    </div>
 </transition>
</template>

<script>
import '@/assets/normalize.css'
import axios  from "axios";
import { Host } from '../api/common'
import '../../node_modules/bootstrap/dist/css/bootstrap.css'
export default {
  data(){
    return{
      hotsong:[],
      keywords:'',
      beforesearch:[]
    }
  },
  created(){
    this.hotsearchsong()
/*     this.searchrecommend(this.keywords) */
    console.log(this.keywords)
  },
  methods:{
    toFind(){
      this.$router.push('/find')
      alert('2')
      console.log('1')
    },
    hotsearchsong(){
      axios.get(Host+'/search/hot/detail').then(res=>{
        /* console.log(res) */
        this. hotsong=res.data.data
      })
    },
    searchrecommend(){
      axios.get(Host+'/search/suggest?type=mobile&keywords='+this.keywords).then(res=>{
        console.log(res)
        this.beforesearch=res.data.result.allMatch
        this.$refs.needhidden.style.display = 'block'
      })

    },
    yincang(){
      this.$refs.needhidden.style.display = 'none'
    }
  }

}
</script>


<style lang="less" scoped>
body{
  margin: 0;
  padding: 0;
}
.beforesrarch ul{
  margin: 0;
  padding: 0;
}
.beforesrarch ul li{
  margin: 0;
  padding: 0;
}
.search-container{
  touch-action: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* .v-enter,.v-leave{
  transform: translateX(-100%);
}
.v-enter-to,.v-leave-to{
  transition: all .5s ease;
} */
.input{
  position: fixed;
  width:100%;
  display: flex;
  /* background-color: coral; */
  justify-content: space-around;
  align-items: center;
  height: 40px;
  margin: 10px 0;
}
.input .el-icon-back{
 margin-left: 20px;
  font-size: 20px;

}
.search{
  width: 80%;
  outline: none;
  height: 35px;
  border: 0;
  border-bottom: 1px solid #333;
  margin-top:15px ;
}
.el-icon-user{
   margin-right: 20px;
  font-size: 20px;
}
.el-icon-back {
  display: inline-block;
}
.hotsearch{
  width: 100%;
  margin-top: 60px;
}
.hotsearch h4{
  padding-left: 20px;
  text-align: left;
   font-size: 12px;
}
.hotsearch ul li{
  margin: 10px 0;
  height: 40px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hotsearch ul li span{
font-size: 14px;
margin-left: -20px;
}
.hotsearch ul li div{
  flex: 1;
 width: 80%;
 margin-left: -15px;
}
.hotsearch ul li span:last-child{
margin-right: 20px;
color: #999;
}
.hotsearch ul li h5{
 margin-left: 40px;
  color: #333;
}
.hotsearch ul li p{
  font-size: 8px;
margin-left: 40px;
}
.beforesearch{
  display: none;
  width: 85%;
  position: absolute;
  background-color: rgb(250, 249, 244);
  top: 50px;
  left: 20px;
  margin-top: 10px;
  box-shadow: 0px 0px 7px #999;
}
.beforesearch p{
  border-bottom: 1px solid #999;
  height: 35px;
  line-height: 35px;
  text-align: left;
  margin: 0 15px;
  color: rgb(4, 37, 4);
}
.beforesearch li {
  padding-left: 20px;  
  text-align: left;
  line-height: 35px;
  height: 35px;
  border-bottom: 1px solid #999;
  font-size: 14px;
}
.beforesearch li i{
  font-size: 16px;
  margin: 0 15px;
}
</style>